<template>
  <!-- 银行流水 11-->
  <div class="jeecg-basic-table jeecg-basic-table-form-container">
    <a-form @keyup.enter.native="searchQuery">
      <a-row :gutter="8" type="flex">
        <!--a-col flex="135px">
          <a-form-item label="部门" :label-col="{ style: { width: '40px' } }" :wrapper-col="{ span: 18 }">
            <JDictSelectTag v-model:value="queryParam.ddlxIds" dictCode="ddlxType@ddlxUser" mode="multiple" :maxTagCount="0" placeholder="全部" :autofocus="false" />
          </a-form-item>
        </!--a-col-->

        <a-col flex="180px">
          <a-form-item label="收支账户" :label-col="{ style: { width: '70px' } }" :wrapper-col="{ span: 18 }">
            <JDictSelectTag
              v-model:value="queryParam.bankIds"
              dictCode="chee_bank,djm,id@ddlxBank"
              mode="multiple"
              placeholder="全部"
              :maxTagCount="0"
              :autofocus="false"
              :dropdownStyle="{ width: '200px', overflow: 'auto' }"
              :dropdownMatchSelectWidth="false"
            />
          </a-form-item>
        </a-col>

        <a-col flex="350px">
          <a-form-item label="记账日期" :label-col="{ style: { width: '70px' } }" :wrapper-col="{ style: { width: '270px' } }">
            <a-date-picker v-model:value="queryParam.jzsjBegin" valueFormat="YYYY-MM-DD" style="width: 125px" /> ~
            <a-date-picker v-model:value="queryParam.jzsjEnd" :disabled-date="disabledEndDate" valueFormat="YYYY-MM-DD" style="width: 125px" />
          </a-form-item>
        </a-col>

        <a-col flex="320px">
          <a-form-item label="金额" :label-col="{ style: { width: '45px' } }" :wrapper-col="{ style: { width: '250px' } }">
            <a-input-number v-model:value.number="queryParam.beginJe" class="w-80px min-w-60px" /> -
            <a-input-number v-model:value.number="queryParam.endJe" class="w-80px min-w-60px" />
          </a-form-item>
        </a-col>

        <a-col flex="auto" style="float: right; width: 100px">
          <span style="float: right; overflow: hidden" class="table-page-search-submitButtons">
            <a-button type="primary" color="success" @click="searchQuery" preIcon="ant-design:search" style="margin-right: 8px;">查询</a-button>
            <j-upload-button type="primary" color="warning" preIcon="ant-design:arrow-up-outlined" @click="onImportXls" class="ml-4">导入</j-upload-button>
            <a-button type="primary" @click="caleQueryDate('1')" preIcon="ant-design:calendar-twotone" style="margin: 8px;">昨天</a-button>
            <a-button type="primary" @click="caleQueryDate('2')" preIcon="ant-design:field-number-outlined" style="margin-right: 8px;">本周</a-button>
            <a-button type="primary" @click="caleQueryDate('3')" preIcon="ant-design:insert-row-above-outlined">本月</a-button>
          </span>
        </a-col>
      </a-row>
    </a-form>
  </div>

  <!-- table区域-begin -->
  <BasicTable @register="registerTable" :onRowClick="handleClick" :rowClassName="rowClassName"> </BasicTable>
  <!-- table区域-end-->

</template>

<script lang="ts" setup name="bankRunningTemp-list">
  import { ref, reactive, toRaw } from 'vue';
  import { BasicTable, TableAction, ActionItem, BasicColumn } from '/@/components/Table';
  import { useListPage } from '/@/hooks/system/useListPage';
  import { render } from '/@/utils/common/renderUtils';
  import { bankRunningTemplist, getImportUrl, doMatcher, clearMatcher } from '/@/views/full/bank/types/bankRunningTemp.api';
  import { filterObj } from '/@/utils/common/compUtils';

  import dayjs from 'dayjs';
  import JDictSelectTag from '/@/components/Form/src/jeecg/components/JDictSelectTag.vue';

  //初始化 -------------------------------------------------------------
  //定义查询表单，查询条件
  const queryParam = reactive<any>({
    jzsjBegin: dayjs().subtract( 3, 'month').startOf('month').format('YYYY-MM-DD'),
    jzsjEnd: dayjs().format('YYYY-MM-DD'),
    bankIds: null,
    beginJe: '',
    endJe: '',
  });

  const deleDisabled = ref<boolean>(true);

  /* 日期参数 */
  function disabledStartDate(beginDate) {
    const endDate = queryParam.jzsjEnd;
    if (!beginDate || !endDate) {
      return false;
    }
    return beginDate.valueOf() > dayjs(endDate).valueOf();
  }

  function disabledEndDate(endDate) {
    const beginDate = queryParam.jzsjBegin;
    if (!endDate || !beginDate) {
      return false;
    }
    return dayjs(beginDate).valueOf() > endDate.valueOf();
  }

  //订单列表
  const statusFmt = ({ text }: { text: any }) => {
    if (text && text !== '合计') {
      const color = text == '0' ? 'green' : text == '1' ? 'red' : 'green';
      const value = text == '0' ? '未审' : text == '1' ? '已审' : '未审';
      return render.renderTag(value, color);
    }
  };

  //账号名称
  const djmFmt = ({ text }: { text: any }) => {
    if (text == '未匹配') {
      return render.renderColor(text, 'text-red-500');
    }
    return text;
  };

  //订单列表 - 表头
  const columns: BasicColumn[] = [
    { title: '日期', align: 'center', dataIndex: 'jzsj', width: 85 },
    { title: '账号', align: 'center', dataIndex: 'bank_id', width: 40 },
    { title: '银行', align: 'left', dataIndex: 'bank_name', width: 120 },
    { title: '转款人', align: 'left', dataIndex: 'zkr', width: 150 },
    { title: '收入', align: 'right', dataIndex: 'srje', width: 80, className: 'text-red-500' },
    { title: '支出', align: 'right', dataIndex: 'zcje', width: 80, className: 'text-green-500' },
    { title: '摘要', align: 'left', dataIndex: 'bz', width: 150, },
  ];

  function searchQuery() {
    //filterObj
    let params = toRaw(filterObj(queryParam));
    if (typeof params.shbj === 'undefined') {
      params.shbj = '';
    }
    setProps({ searchInfo: params });
    reload();
  }

  //tableData: Recordable[]
  function handleSummary() {
    const res = getRawDataSource();
    if (res) {
      return getRawDataSource().summary;
    } else {
      return [];
    }
  }

  // 列表页面公共参数、方法
  const { prefixCls, tableContext, onImportXls } = useListPage({
    designScope: 'bankrunningtemp-list',
    tableProps: {
      api: bankRunningTemplist,
      columns: columns,
      size: 'small',
      showTableSetting: false,
      showIndexColumn: true, //行号
      showActionColumn: false,
      useSearchForm: false,
      resizeHeightOffset: 40,
      showSummary: true,
      summaryFunc: handleSummary,
      beforeFetch: (params) => Object.assign(params, filterObj(queryParam)),
    },
    importConfig: {
      url: getImportUrl,
      success: () => reload(),
    },
  });

  //注册table数据
  const [registerTable, { reload, setProps, getRawDataSource }] = tableContext;

  //单击行
  let selectRows = reactive<any>({});
  function handleClick(record) {
    if (record.id && record.bankId_B) {
      deleDisabled.value = false;
      Object.assign(selectRows, {id: record.id})
    } else {
      deleDisabled.value = true;
      Object.keys(selectRows).map(key => delete selectRows[key])
    }
    //console.info("handleClick@@", record.id , record.bankId_B, selectRows)
  }

  function rowClassName(record) {
    return record.id === selectRows.id ? 'row-selected' : '';
  }

  /**
   * 收支项目 注册弹出编辑窗口
   * 作者：qdl
   * 日期：2022-07-04
   */
  // const [registerAccountExcel, { openModal: accountExcel }] = useModal();


  // function handleImportExcel() {
  //   accountExcel(true, {businessId: business.id, orderId: business.orderId, travelLine: business.travelLine})
  // }
  function handleImportExcel() {

  }

  function handleMatcher() {
    doMatcher();
  }

  function handleClearMatcher() {
    clearMatcher();
  }


  function caleQueryDate(type) {
    if( type === '1') {
      //昨天
      queryParam.jzsjBegin = dayjs().subtract( 1, 'day').format('YYYY-MM-DD')
      queryParam.jzsjEnd = dayjs().subtract( 1, 'day').format('YYYY-MM-DD')
    } else if(type === '2') {
      //本周
      queryParam.jzsjBegin = dayjs().startOf('week').add(0, 'day').format('YYYY-MM-DD')
      queryParam.jzsjEnd = dayjs().startOf('week').add(6, 'day').format('YYYY-MM-DD')
    } else if(type === '3') {
      //本月
      queryParam.jzsjBegin = dayjs().startOf('month').format('YYYY-MM-DD')
      queryParam.jzsjEnd = dayjs().endOf('month').format('YYYY-MM-DD')
    } else if(type === '4') {
      //上月
      queryParam.jzsjBegin = dayjs().add(-1, 'month').startOf('month').format('YYYY-MM-DD')
      queryParam.jzsjEnd = dayjs().add(-1, 'month').endOf('month').format('YYYY-MM-DD')
    }
    searchQuery();
  }

</script>
<style scoped></style>
